<template>
  <div class="lostAndFound">
    <div class="top_img" :style="'background-image: url(' + topBg + ')'">
      <span>
        {{ initData.goodsName }}
      </span>
    </div>


    
    <div class="main">
      <div class="col_title">
        {{ initData.goodsName }}
      </div>
      <div class="col_name_time">
        <span> 发布人：{{ initData.createdBy }} </span>
        <span>
          时间：
          {{
            $moment(parseInt(initData.createdAt)).format("YYYY-MM-DD HH:mm:ss")
          }}
        </span>
      </div>
      <div class="col_tel">联系方式： {{ initData.telephone }}</div>
      <div class="col_img">
        <img :src="initData.describedImgUrl" width="100%" alt="" />
      </div>
      <div class="col_comtent">
        {{ initData.describedText }}
      </div>
    </div>
  </div>
</template>
<script>
import { getByIdLostFound } from "@/util/lostFound.js";

export default {
  data() {
    return {
      topBg:
        "http://175.178.92.128:8087/campus_help_system/images/insidePages/20190910163919740.jpg",
      initData: {},
    };
  },
  created() {
    this.getByIdLostFound();
  },
  mounted() {},
  methods: {
    async getByIdLostFound() {
      let { data: res } = await getByIdLostFound({
        id: this.$route.params.id,
      });
      this.initData = res.data;
    },
  },
};
</script>
<style lang="less" scoped>
.lostAndFound {
  padding-bottom: 50px;
  .top_img {
    height: 280px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    & > span {
      font-size: 48px;
      font-weight: 700;
      color: #fff;
    }
  }
  .main {
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    .col_title {
      font-size: 28px;
      margin-bottom: 24px;
    }
    .col_name_time {
      text-align: center;
      font-size: 14px;
      color: #999;
      margin-bottom: 24px;
      span {
        margin-right: 24px;
      }
    }
    .col_img {
      margin: 0 auto;
      width: 800px;
      margin-bottom: 48px;
    }
    .col_comtent {
      text-align: left;
      margin-bottom: 24px;
      font-size: 16px;
      line-height: 26px;
      color: #333;
      text-indent: 2em;
    }
    .col_tel {
      text-align: center;
      font-size: 22px;
      margin-bottom: 24px;
      font-weight: 700;
    }
  }
}
</style>
